<template>
    <div>
        <div>
            <!-- 详情页轮播内容 -->
            <div class="details-swipper-container">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in storelistdetails.pics"
                    :key="index"
                    :item="item"
                    >
                        <img :src=item.pic alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 详情页轮播内容结束 -->
            <!-- 详情页商品描述 -->
            <div>
                <div class="details-item-name">{{storelistdetails.basicInfo.name}}</div>
                <div class="details-item-mess">{{storelistdetails.basicInfo.characteristic}}</div>
                <div class="details-item-price-container">
                    <div class="details-item-price">低价￥{{storelistdetails.basicInfo.minPrice}}</div>
                    <div>原价{{storelistdetails.basicInfo.originalPrice}}</div>
                    <div>库存{{storelistdetails.basicInfo.stores}}</div>
                </div>
            </div>
            <!-- 详情页商品描述结束 -->
            <!-- 详情页底部 -->
            <div class="details-btn-container"> 
                <div class="details-btn-wrapper">
                    <van-goods-action>
                        <van-goods-action-icon icon="chat-o" />
                        <van-goods-action-icon icon="cart-o"  />
                        <van-goods-action-icon icon="shop-o" />
                        <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
                        <van-goods-action-button
                            type="danger"
                            text="立即购买"
                            @click="onClickButton"
                        />
                    </van-goods-action>
                </div>
            </div>
            <div>
                <van-popup v-model="show" position="bottom" :style="{ height: '60%' }" >
                    <div class="details-show-container">
                        <div class="details-show-img">
                            <div>
                                <img :src=storelistdetails.basicInfo.pic alt="">
                            </div>
                        </div>
                        <div class="details-show-title">
                            <div>{{storelistdetails.basicInfo.name}}</div>
                            <div>￥{{storelistdetails.basicInfo.minPrice}}</div>
                        </div>
                    </div>
                    <!-- 商品尺码 -->
                    <div>
                        <div v-for="(item,index) in storelistdetails.properties "
                        :key="index"
                        >
                            <div>{{item.name}}</div>
                            <div class="details-show-size">
                                <div v-for="(item,index) in item.childsCurGoods "
                                :key="index"
                                class="details-show-size-item"
                                >
                                    {{item.name}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="details-show-count-container">
                        <div>
                            购买数量
                        </div>
                        <div class="details-show-count-item">
                            <div class="details-show-count-minus">-</div>
                            <div class="details-show-count">1</div>
                            <div class="details-show-count-add">+</div>
                        </div>
                    </div>
                    <div class="surebuy" @click="addcartitem">加入购物车</div>
                </van-popup>
            </div>
  </div>
    </div>
</template>
<script>
import "../css/details.css"
export default {
    data(){
        return{
            show: false,
        }
    },
    methods: {
        onClickButton(){
            this.show=true
        },
        addcartitem(){
            this.show=false;
            this.$store.dispatch("getcart",this.storelistdetails.basicInfo)
        }
    },
    mounted(){
        this.$store.dispatch("Storelistdetails",this.$route.params.id)
    },
    computed:{
        storelistdetails:function(){
            return this.$store.state.Listmodules.storelistdetails
        }
    }
}
</script>
<style>

</style>